<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
       margin: 0;padding: 0;
   }
   #menu{
       width: 100px;height: 30px;
       font-size: 10px;text-align: center;line-height: 30px;
       transition: 0.6s;
       margin: 10px auto;
       transform-origin: center;
       transform: rotateX(0deg);transform:perspective(200px);
       transform-style: preserve-3d;
   }
   #menu:hover{
       transform: rotateX(90deg);
   }
   #menu > div{
       width: 100px;height: 30px;position: absolute;
       left: 0;top: 0;transition: 2s;opacity: 0.7;
   }
   #menu .m1{
       background-color:rgb(180, 132, 132);
       transform: translateY(-15px) rotateX(90deg);
   }
   #menu .m2{
       background-color: rgb(180, 132, 132);
       transform: translateY(15px) rotateX(-90deg);
   }
   #menu .m3{
       width: 30px;height: 30px;
       background-color: rgb(180, 132, 132);
       transform: translateX(-15px) rotateY(90deg);
   }
   #menu .m4{
       width: 30px;height: 30px;
       background-color: rgb(180, 132, 132);
       transform: translateX(85px) rotateY(-90deg);
   }
   #menu .m5{
       background-color: rgb(180, 132, 132);
       transform: translateZ(15px);
   }
   #menu .m6{
       background-color: rgb(180, 132, 132);
       transform: translateZ(-15px);
   }
   .box{
       float: left;position: relative;width: 300px;height: 300px;
       margin: 600px 100px;overflow: hidden;
   }
   .box > img{
       width: 300px;height: 300px;
   }
   .box > *{
       transition: 1s;position: absolute;left: 0px;top: 0px;
   }
   .box h2{
       color: white;
       width: 200px;
       transform: translateX(10px) translateY(250px);
   }
   .box p{
       color: white;
   }
   .box p:nth-of-type(1){
       transform: translateY(140px) translateX(-150px);
   }
   .box p:nth-of-type(2){
       transform: translateY(180px) translateX(-110px);
       transition: 1s 0.1s;
   }
   .box p:nth-of-type(3){
       transform: translateY(220px) translateX(-100px);
       transition: 1s 0.2s;
   }
   .box:hover p:nth-of-type(1){
       transform: translateY(140px) translateX(10px);
   }
   .box:hover p:nth-of-type(2){
       transform: translateY(180px) translateX(10px);
   }
   .box:hover p:nth-of-type(3){
       transform: translateY(220px) translateX(10px);
   }
   .box:hover img{
       transform:scale(1.3) rotateZ(-15deg);
   }
   #cube{
       width: 300px;height: 300px;
       font-size: 80px;text-align: center;line-height: 300px;
       transition: 2s;
       margin: 100px auto;
       transform: rotateY(-30deg) rotateX(-35deg);
       transform-style: preserve-3d;
   }
   #cube:hover{
       transform: rotateY(30deg) rotateX(35deg);
   }
   #cube > div{
       width: 300px;height: 300px;position: absolute;
       left: 0;top: 0;transition: 2s;opacity: 0.7;
       border: 1px dashed black;
   }
   #cube .flat1{
       background-color: rgba(255,0, 0, 0.5);
       transform: translateY(-150px) rotateX(90deg);
   }
   #cube .flat2{
       background-color: rgba(255,144, 0, 0.5);
       transform: translateY(150px) rotateX(-90deg);
   }
   #cube .flat3{
       background-color: rgba(255,255, 0, 0.5);
       transform: translateX(-150px) rotateY(90deg);
   }
   #cube .flat4{
       background-color: rgba(255,122, 0, 0.5);
       transform: translateX(150px) rotateY(-90deg);
   }
   #cube .flat5{
       background-color: rgba(0,111, 199, 0.5);
       transform: translateZ(150px);
   }
   #cube .flat6{
       background-color: rgba(255,111, 199, 0.5);
       transform: translateZ(-150px);
   }
</style>
<body>
    <!--
        <link ...>引用外部的css文件
        .icon-muying::before{content: "\e669";}
        <span class="icon-muying"></span>

        transform的位移效果
        transform:translateX(40px);在X轴这个方向，它向右偏移了40px
    不会影响其他元素的布局，只在自己原本的地方发生位移，相当于
        {
            position：relative;
            left:40px;
        }
        缩放效果
        transform:(1.5);
        transform-origin:50% 50%;//处于中心位置 100% 50% 右边中心位置 0% 0% 左上角
        旋转效果
        transform:rotateX/rotateY/rotateZ
        透视
        transform:perspective(1000px)//设置观察距离要写在最开始的位置
        每个都单独添加 直接观察一个物品
        给父元素添加 视线中间物品为正，旁边物品为侧
        3D效果
        transform-style:perserve-3d //保持3d效果
        opacity 透明度 0的时候透明
    -->
    <div class="box">
        <img src="img/1.png">
        <h2>Taylor Swift</h2>
        <p class="p1">Hello:2021.3.21</p>
        <p class="p2">Height:180cm</p>
        <p class="p3">Weight:50kg</p>
    </div>
    <div id="cube">
        <div class="flat1">
            <img src="img/1.jpeg" height="300px" width="300px">
        </div>
        <div class="flat2">
            <img src="img/2.jpg" height="300px" width="300px">
        </div>
        <div class="flat3">
            <img src="img/3.jpg" height="300px" width="300px">
        </div>
        <div class="flat4">
            <img src="img/4.jpg" height="300px" width="300px">
        </div>
        <div class="flat5">
            <img src="img/5.jpg" height="300px" width="300px">
        </div>
        <div class="flat6">
            <img src="img/6.jpg" height="300px" width="300px">
        </div>
    </div>
    <div id="menu">
        <div class="m1"></div>
        <div class="m2">HOME</div>
        <div class="m3"></div>
        <div class="m4"></div>
        <div class="m5">HOME</div>
        <div class="m6"></div>
    </div>
</body>
</html>